<script setup lang="ts">

import { useRouter } from 'vue-router'

const router = useRouter()

// 函数式 的 path 和 query
function toB() {
  router.push({
    path: '/PageB',
    query: {
      // id: 103
    }
  })
}

// 函数式的 name 和 params
function ToB() {
  router.push({
    name: 'PageB',
    params: {
      id: 103
    }

  })
}
</script>

<template>
  <!--  路由跳转传参-->
  <h1>PageA页面</h1>
  <!--  <router-link to="/PageB">去PageB页面</router-link>-->
  <!--  1.声明式 path 和 query-->
  <!--  <router-link :to="{path:'/PageB',query:{id:103,key:'free'}}">去PageB页面</router-link>-->
  <!--  &lt;!&ndash;  1.1 声明式 name 和 params 我们还是需要修改路由 定义name的时候不需要携带 / &ndash;&gt;-->
  <!--  <router-link :to="{name:'PageB',params:{id:103}}">去PageB页面&#45;&#45;第二种方式</router-link>-->

  <!--2.函数式 path 和 query-->
  <button @click="toB">toB</button>
  <!--  2.1 函数式 name 和 params-->
  <button @click="ToB">去B页面</button>
</template>

<style scoped>

</style>
